<template>
  <div class="lefts">
    <el-row class="tac">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="rgb(50, 65, 87)"
        text-color="rgb(191, 203, 217)"
        active-text-color="#ffd04b"
        :unique-opened="true"
        :router="true"
      >
        <el-submenu
          :index="index + ''"
          v-for="(el, index) in newMenu"
          :key="index"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ el.title }}</span>
          </template>
          <el-menu-item
            :index="e.path"
            v-for="(e, ind) in el.subs"
            :key="ind"
            >{{ e.title }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuConfig: [
        {
          title: "商品管理",
          subs: [
            { title: "商品列表", path: "/good" },
            { title: "商品分类", path: "/category" },
            { title: "品牌管理", path: "/brand" },
            { title: "商品属性管理", path: "/attribute" },
          ],
        },
        { title: "订单中心", subs: [{ title: "订单列表", path: "/order" }] },
        {
          title: "店铺运营",
          subs: [
            { title: "专题管理", path: "/topic" },
            { title: "运营数据", path: "/statdata" },
          ],
        },
      ],
      newMenu: [],
    };
  },
  created() {
    let menu = this.$store.state.menu;
    // 把vuex里面权限列表转换成对象
    let menuObj = menu.reduce((prev, current) => {
      prev[current.path] = current;
      return prev;
    }, {});
    // 循环完整的菜单数组，生成当前用户菜单数组
    for (var i = 0; i < this.menuConfig.length; i++) {
      let newSubs = [];
      for (var j = 0; j < this.menuConfig[i].subs.length; j++) {
        let subsObj = this.menuConfig[i].subs[j];
        if (menuObj[subsObj.path]) {
          newSubs.push(subsObj);
        }
      }
      if (newSubs.length > 0) {
        this.newMenu.push({
          ...this.menuConfig[i],
          subs: newSubs,
        });
      }
    }
    let obj = { a: 1, b: 2 };
    let obj2 = { ...obj };
    console.log(obj2);
  },
  /*  created() {
    var arr = [
      {
        title: "商品管理",
        subs: [
          { title: "商品列表", path: "/good" },
          { title: "商品分类", path: "/category" },
          { title: "品牌管理", path: "/brand" },
          { title: "商品属性管理", path: "/attribute" },
        ],
      },
      { title: "订单中心", subs: [{ title: "订单列表", path: "/order" }] },
      {
        title: "店铺运营",
        subs: [
          { title: "专题管理", path: "/topic" },
          { title: "运营数据", path: "/statdata" },
        ],
      },
    ];
    var arr2 = [
      { id: 3, user_id: 1, path: "/category", path_name: "分类页面" },
      { id: 4, user_id: 1, path: "/good", path_name: "商品页面" },
      { id: 6, user_id: 1, path: "/order", path_name: "订单页面" },
    ];
    // 转对象
    var newObj = {};
    for (var m = 0; m < arr2.length; m++) {
      let path = arr2[m].path;
      let val = arr2[m];
      newObj[path] = val;
    }
    console.log(newObj);

    var newMenuArr = [];
    for (var i = 0; i < arr.length; i++) {
      var newSubs = [];
      for (var j = 0; j < arr[i].subs.length; j++) {
        var path = arr[i].subs[j].path;
        if (newObj[path]) {
          newSubs.push(arr[i].subs[j]);
        }
      }
      if (newSubs.length > 0) {
        newMenuArr.push({
          title: arr[i].title,
          subs: newSubs,
        });
      }
    }
    console.log(newMenuArr);
  }, */
  /* methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  }, */
};
</script>
 
<style lang = "less" scoped>
.lefts {
  display: block;
  width: 250px;
  height: 100%;
  float: left;
  background-color: rgb(50, 65, 87);
}
/* element {
  background-color: rgb(50, 65, 87);
} */
</style>